<template>
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
        <h2 class="m-n font-thin h4 pull-left">数据库 > Mysql > 新建实例</h2>
    </div>


    <div class="wrapper-md">
        <form novalidate name="formData">

            <div class="row">
                <div class="col-md-10 col-sm-10">
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <div class="panel panel-default">
                                <dl class="bk-group">
                                    <dt class="bk-title">
                                        <span>基</span>
                                        <span>本</span>
                                        <span>配</span>
                                        <span>置</span>
                                    </dt>
                                    <dd class="bk-detail">
                                        <div class="form-group row">
                                            <div class="wrap-title col-md-2">地域:</div>
                                            <div class="form-control1 col-md-10">
                                                <div class="wrap">
                                                    <input type="radio" id="radio_1" name="region" class="chk_1" value="北京" v-model="data.region"/>
                                                    <label for="radio_1">北京</label>
                                                    <input type="radio" id="radio_2" name="region" class="chk_1" value="上海" v-model="data.region"/>
                                                    <label for="radio_2">上海</label>
                                                    <input type="radio" id="radio_3" name="region" class="chk_1" value="大连" v-model="data.region"/>
                                                    <label for="radio_3">大连</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="wrap-title col-md-2">可用区:</div>
                                            <div class="form-control1 col-md-3">
                                                <v-select url="../datas/availarea.json" :value.sync="data.availarea" :placeholder="select.placeholder" :search-text="select.searchText" :search="select.search" :clear-button="select.clearButton"></v-select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="wrap-title col-md-2">版本:</div>
                                            <div class="form-control1 col-md-10">
                                                <div class="wrap">
                                                    <input type="radio" id="radio_4" name="version" class="chk_1" value="5.5" ng-model="data.version"/>
                                                    <label for="radio_4">5.5</label>
                                                    <input type="radio" id="radio_5" name="version" class="chk_1" value="5.6" ng-model="data.version"/>
                                                    <label for="radio_5">5.6</label>
                                                </div>
                                            </div>
                                        </div>

                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <div class="panel panel-default">
                                <dl class="bk-group">
                                    <dt class="bk-title">
                                        <span>存</span>
                                        <span>储</span>
                                    </dt>
                                    <dd class="bk-detail">
                                        <div class="form-group row">
                                            <div class="wrap-title col-md-2">存储空间:</div>
                                            <div class="form-control1 col-md-8">
                                                <slider :slider-value.sync="data.myValue" :slider-min="0" :slider-max="2000" :slider-step="5" v-ref:slider></slider>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="clearfix numberComponent" style="margin-top: 5px;margin-left: -5px;">
                                                    <input type="text" :disabled="data.myValue >= 2000 || data.myValue <= 0" class="form-control" v-model="data.myValue" style="width: 55px;height: 35px;"/>
                                                    <div class="plusMinus">
                                                        <button type="button" :disabled="data.myValue >= 2000" @click="data.myValue=data.myValue+5">
                                                            <i class="fa fa-caret-up"></i>
                                                        </button>
                                                        <button type="button" :disabled="data.myValue <= 0" @click="data.myValue=data.myValue-5">
                                                            <i class="fa fa-caret-down"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="wrap-title col-md-2">内存:</div>
                                            <div class="form-control1 col-md-3">
                                                <v-select url="../datas/ram.json" :value.sync="data.ram" :placeholder="select.placeholder" :search-text="select.searchText" :search="select.search" :clear-button="select.clearButton"></v-select>
                                            </div>
                                        </div>

                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <div class="panel panel-default">
                                <dl class="bk-group">
                                    <dt class="bk-title">
                                        <span>实</span>
                                        <span>例</span>
                                        <span>数</span>
                                        <span>量</span>
                                    </dt>
                                    <dd class="bk-detail">
                                        <div class="form-group row">
                                            <div class="wrap-title col-md-2">申请时长:</div>
                                            <div class="form-control1 col-md-10">
                                                <ul class="timeGrid clearfix col-md-7" id="timeGrid">
                                                    <li v-for="n in monthArr" @click="chooseLi(n)" :class="{'active':n.checked}">{{n.num}}</li>
                                                </ul>
                                                <div class="col-md-2" style="line-height: 30px;margin-left: -15px;">
                                                    <span>{{monthNum}}</span>个月
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="wrap-title col-md-2">数量:</div>
                                            <div class="form-control1 col-md-10">
                                                <div class="clearfix numberComponent">
                                                    <input type="text" class="form-control" v-model="data.count"/>
                                                    <div class="plusMinus">
                                                        <button type="button" @click="data.count=data.count+1">
                                                            <i class="fa fa-caret-up"></i>
                                                        </button>
                                                        <button type="button" :disabled="data.count <= 1" @click="data.count=data.count-1">
                                                            <i class="fa fa-caret-down"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-2 col-sm-2 pull-right" style="padding-left: 0;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            当前配置
                        </div>
                        <div class="panel-body">
                            <ul class="bk-items-list">
                                <li>
                                    <span class="bk-item-name">配置:</span><span>北京 可用区A</span>
                                </li>
                                <li>
                                    <span class="bk-item-name">版本:</span><span>5.5</span>
                                </li>
                                <li>
                                    <span class="bk-item-name">存储:</span><span>100G</span>
                                </li>
                                <li>
                                    <span class="bk-item-name">内存:</span><span>40G</span>
                                </li>
                                <li>
                                    <span class="bk-item-name">时长:</span><span>6个月</span>
                                </li>
                                <li>
                                    <span class="bk-item-name">购买量:</span><span>2台</span>
                                </li>
                            </ul>
                            <div class="bk-items-price">
                                <div class="price-title">配置费用:</div>
                                <div class="price-settle">
                                    <span>¥</span>
                                    <span>327.00</span>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer" style="text-align: center">
                            <button type="submit" class="btn btn-dark">立即购买</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-10" style="text-align: center;">
                    <button type="button" class="btn btn-default" style="margin-right: 10px;">返回</button>
                    <!--<button type="submit" class="btn btn-dark">立即购买</button>-->
                </div>
            </div>

        </form>
    </div>
</template>
<style>

</style>
<script>

    import VueStrap from "vue-strap"
    import slider from "../../resources/components/nouislider.vue"

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}
            return {        //必须使用这样的形式，才能创建出单一的作用域
                data:{
                    region:null,
                    availarea:null,
                    version:null,
                    ram:null,
                    count:1,
                    myValue:500
                },
                select:{
                    justified: true,
                    search: false,
                    required:true,
                    clearButton:true,
                    closeOnSelect:true,
                    disabled:false,
                    normal:null,
                    placeholder:'请选择...',
                    searchText:'关键字'
                },
                monthArr:[],
                monthNum:1
            }
        },
        ready () {
            this.monthArr = [{
                num:1,
                checked:true
            },{
                num:2,
                checked:false
            },{
                num:3,
                checked:false
            },{
                num:4,
                checked:false
            },{
                num:5,
                checked:false
            },{
                num:6,
                checked:false
            },{
                num:7,
                checked:false
            },{
                num:8,
                checked:false
            },{
                num:9,
                checked:false
            },{
                num:10,
                checked:false
            },{
                num:11,
                checked:false
            },{
                num:12,
                checked:false
            }];
        },
        methods :{
            chooseLi (obj){
                this.monthNum = obj.num;

                this.monthArr.forEach(function(v,i){
                    v.checked = false;
                });

                var i;

                for(i=0;i<=parseInt(obj.num)-1;i++){
                    this.monthArr[i].checked = true;
                }
            },
            updateSlider () {
//                this.$refs.slider.updateValue([this.data.myValue]);
            }
        },
        components: {
            vSelect:VueStrap.select,
            vOption:VueStrap.option,
            slider
        }
    }

</script>
